<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>promise代码重排</title>
      <script src="script/jquery-3.6.0.min.js"></script>
      <script type="text/javascript">
          /*
            当发出多次ajax请求时，可以把方法体中的请求部分抽取封装成方法利于维护
           */
          function get(url, data) {
                return new Promise((resolve, reject)=> {
                    $.ajax({
                        url:url,
                        data:data,
                        success(resultData){
                            resolve(resultData);
                        },
                        error(err) {
                            reject(err);
                        }
                    })
                })
          }

          /*
            需求：
            1.先获取monster.json
            2.获取monster_detail_1.json
            3.获取monster_gf_2.json
           */
          get("data/monster.json")
              .then((result) => {
                  //第一次ajax请求后的处理代码
                  console.log("result=", result);
                  //发出第二次ajax请求
                  return get(`data/monster_detail_${result.id}.json`);
              }).then((result2) => {
                  //第二次ajax请求后的处理代码
                  console.log("result2=", result2);
                  return get(`data/monster_gf_${result2.gfid}.json`);
              }).then((result3) => {
                  //第三次ajax请求后的处理代码
                  console.log("result3=", result3);
              }).catch((err) => {
                  //对多次请求的异常进行捕获
                  console.log("捕获到异常=", err);
              })
      </script>
  </head>
  <body>

  </body>
</html>